/**
 * GraphProperty module
 */

 var React = require("react");
 var tool = require("../../../utils/tool");
 var ColorPicker = require("./ColorPicker");
 var consts = require("../../../consts/consts");
 var CommonProperty = require("./CommonProperty");
 var GraphProperty = React.createClass({
    mixins: [CommonProperty],
    getInitialProps: function (){
        return {
            root: {},
            widget: {},
            parent: {}
        }
    },
    componentWillMount: function (){
        var parent = this.props.parent;
        this.handleOnInputBlur = parent.handleOnInputBlur;
    },
    handleOnRadiusChanged: function (e){
        const {updateWidget,setState} = this.props;
        var elem = $(e.target || e.srcElement);
        var radius = parseFloat(elem.val()) || 0;

        var widget = this.props.widget;
        widget.radius = radius >
            Math.min(widget.width, widget.height) / 2 ?
                Math.min(widget.width, widget.height) / 2 : radius;
        widget.property_changed = new Date();
        updateWidget(widget);
        setState({
            selectedWidget: widget
        });
    },
    render: function (){
        var root = this.props.root;
        var widget = this.props.widget;
        var parent = this.props.parent;
        var radius = widget.radius || 0;
        var rectangleNode = "";
            rectangleNode =
                <div className="rowlist">
                    <label>{$._('Chamfer')}</label>
                    <input name='radius' type="text" value={radius} className="property-radius form-control" data-graph-radius min="0" onBlur={this.handleOnInputBlur.bind(null, "radius")} onChange={this.handleOnRadiusChanged} />
                </div>

        return (
            <div className="graph-property widget-meta-default">
                {rectangleNode}
                <ColorPicker widget={widget} root={root} />
            </div>
        )
    }
 });

 module.exports = GraphProperty;
